<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :style="cardStyle" :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item label="省/直辖市" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select @change="handleProvinceChange">
                    <a-select-option v-for="(item,index) in provinces" :key="index" :value="item.id">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
<!--              <a-col :md="6" :sm="24">
                <a-form-item label="地级市" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select @change="handleCityChange">
                    <a-select-option v-for="(item,index) in cities" :key="index" :value="item.id">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>-->
            </a-row>
          </a-form>
        </div>
        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            :loading="loading">
            <span slot="action" slot-scope="text, record">
              <a @click="editCost(record)">编辑</a>
            </span>
          </a-table>
        </div>
      </a-card>
      <a-modal
        title="Title"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <a-form>
          <a-form-item label="汽车运费">
            <a-input-number :min="1" v-model='cityCost.carCost'/>
          </a-form-item>
          <a-form-item label="船舶运费">
            <a-input-number :min="1" v-model='cityCost.shipCost'/>
          </a-form-item>
          <a-form-item label="铁路运费">
            <a-input-number :min="1" v-model='cityCost.trainCost'/>
          </a-form-item>
          <a-form-item>
            <a-input v-model='cityCost.id' v-if='false'></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-col>
  </a-row>
</template>

<script>
import { getAction, postAction } from '@api/manage'
export default {
  name: 'CityCostList',
  data() {
    return {
      visible: false,
      provinces: [],
      cities: [],
      columns: [
        {
          title: '操作',
          dataIndex: 'action',
          width: 100,
          align:"center",
          scopedSlots: { customRender: 'action' },
        },
        { title: '地区名称',dataIndex: 'name',width:150,align:"left"},
        { title: '地区编码', dataIndex: 'id',width:70,align:"left"},
        { title: '汽车运费', dataIndex: 'carCost',width:70,align:"left"},
        { title: '船舶运费', dataIndex: 'shipCost',width:70,align:"left"},
        { title: '铁路运费', dataIndex: 'trainCost',width:70,align:"left"}
      ],
      cardStyle: '',
      loading: false,
      dataSource: [],
      cityCost: {
        id: "",
        carCost: "",
        trainCost: "",
        shipCost: ""
      },
      /* table选中keys*/
      selectedRowKeys: [],
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 18,
        offset: 1
      },
      /* table选中records*/
      selectionRows: [],
      url: {
        tree: "/city/parent",
        province: "/city/province",
        child: "/city/child",
        edit: "/city/edit"
      },
      queryParam: {},
      province: ""
    }
  },
  created() {
    // this.getTree()
    this.getProvince()
  },
  methods: {
    getTree() {
      getAction(this.url.tree, {}).then(res => {
        this.dataSource = res.data[0].children
        this.loading = false
      })
    },
    getProvince() {
      getAction(this.url.province, {}).then(res => {
        this.provinces = res.data
      })
    },
    handleProvinceChange(val) {
      this.loading = true
      this.province = val
      getAction(this.url.child + '/' + val, {}).then(res => {
        this.dataSource = res.data
        this.loading = false
      })
    },
    handleCityChange(val) {
      this.province = val
      this.loading = true
      getAction(this.url.child + '/' + val, {}).then(res => {
        this.dataSource = res.data
        this.loading = false
      })
    },
    editCost(row) {
      this.visible = true
      this.cityCost.id = row.id
      this.cityCost.carCost = row.carCost
      this.cityCost.shipCost = row.shipCost
      this.cityCost.trainCost = row.trainCost
    },
    handleOk() {
      postAction(this.url.edit, this.cityCost).then(res => {
        this.$message.info('修改价格成功！');
        getAction(this.url.child + '/' + this.province, {}).then(res => {
          this.dataSource = res.data
          this.loading = false
        })
        this.handleCancel()
      })
    },
    handleCancel() {
      this.visible = false
      this.cityCost = {}
    }
  }
}

</script>

<style scoped>
</style>